import React from 'react';
import Facialmaskylcs from './Facialmaskylcs.js'
import Gximg from '../img/diy/gongxiao.png'
import Gxmclose from '../img/material/button.png'

class Facialmaskpage4 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            title:"功效添加",
            effect:{
                dname:"",
                name:""
            },
            moiskin:{
                dname:"",
                name:""
            },
            preservative:{
                dname:"",
                name:""
            },
            words: [
                {
                    "title": "传明酸",
                    "description": "传明酸是一种蛋白酶抑制剂，能抑制蛋白酶对肽键水解的催化作用，从而阻止了如发炎性蛋白酶等酶的活性，进而抑制了黑斑部位的表皮细胞机能的混乱，并且抑制黑色素增强因子群，再彻底断绝因为紫外线照射而形成的黑色素发生的途径。即让黑斑不再变浓、扩大及增加，从而能有效地防止和改善皮肤的色素沉积"
                },
                {
                    "title": "霍霍巴油",
                    "description": "荷荷巴（Jojoba）（又名霍霍巴）是一种墨西哥原生的植物，虽然目前全球都有栽种，但是还是以美墨交界处的沙漠地形最适合它的生长，品质也最优良。这种有一人多高的灌木植物所结的种子中的油，具有良好的渗透性，还具有耐高温的特质。自古就拿来作为各种保养与治疗的使用，事实上，jojoba的原文中就有“神奇的灌木”的意喻。"
                },
                {
                    "title": "玫瑰果油",
                    "description": "玫瑰果油是南美洲的一种野生玫瑰果实，经由特殊新科技方法提炼、萃取浓缩而成的，不含任何化学成份、防腐剂的纯天然植物油。其主要成份由多种不饱和脂肪酸、维他命C、果酸、软硬脂酸、亚麻酸及阳光过滤因子组成。它是南智利人数世纪的美肤法宝，从美少男美少女到稳重帅哥成熟美女，想要让肌肤达到更完美的状态，就一定要知道玫瑰果油。"
                }
            ]
        }
    }
    componentWillMount(){

    }
    componentDidMount(){
        
        this.selectCondition();
    }
    selectCondition(){
        var _this=this
        var clickEvt=function(ele){
            ele.classList.toggle("fmp-select-content-act")
            ele.querySelector(".fmp-sc-icon").classList.toggle("fmp-sc-icon-active")
        }

        var items=document.querySelectorAll(".fmp4-select-content");
        items[0].flag=false
        items[0].addEventListener("click",function(e){    
            this.flag=this.flag==true?false:true
            clickEvt(e.currentTarget);
            if(this.flag){
                _this.setState({
                    effect:{
                        dname:"美白(传明酸)",
                        name:"meibai-a"
                    }
                })
            }else{
                _this.setState({
                    effect:{
                        dname:"",
                        name:""
                    }
                })
            }
            _this.props.callback1(_this.state.effect)
        });
        items[1].addEventListener("click",function(e){    
            document.getElementById("fmp4-model").style.display="block"
        });
        items[2].addEventListener("click",function(e){    
            if(_this.state.preservative.dname==""){
                document.getElementById("fmp4-model2").style.display="block"
            }else{
                this.classList.remove("fmp-select-content-act")
                this.querySelector(".fmp-sc-icon").classList.toggle("fmp-sc-icon-active")
                _this.setState({
                    preservative:{
                        dname:"",
                        name:""
                    }
                })
                _this.props.callback3(_this.state.preservative)
            }
        });

        var mclickEvt=function(ele){
            let moiskin = _this.state.moiskin;
            if(ele.flag){      
                if(ele.index==0){
                    moiskin = {
                        dname:"霍霍芭油",
                        name:"zirun-a"
                    }
                }else{
                    moiskin = {
                        dname:"玫瑰果油",
                        name:"zirun-b"
                    }     
                }
                _this.setState({
                    moiskin: moiskin,
                })
            }else{
                moiskin = {
                    dname:"",
                    name:""
                }
                _this.setState({
                    moiskin: moiskin,
                })
            }
            _this.props.callback2(_this.state.moiskin);
            var a = [];
            var p = ele.parentNode.children;
            for(var i = 0;i<p.length;i++) {
                if(p[i] !== ele) a.push(p[i]);
            }
            for(let j=0;j<a.length;j++){
                a[j].classList.remove("fmp-select-content-act");
                a[j].querySelector(".fmp-sc-icon").classList.remove("fmp-sc-icon-active");
                a[j].flag=false;
            }
            ele.classList.toggle("fmp-select-content-act");
            ele.querySelector(".fmp-sc-icon").classList.toggle("fmp-sc-icon-active");
        }

        var mitems=document.querySelectorAll(".fmp4-mselect-content");
        for(let i = 0;i < mitems.length;i ++) {
            mitems[i].flag = false;
            mitems[i].index = i;
            mitems[i].addEventListener("click",function(e) { 
                this.flag = (this.flag == true)?false:true; 
                mclickEvt(this);
            });
        }
            
    }
    closeModel(){
        document.getElementById("fmp4-model").style.display="none"

    }
    closeModel2(){
        document.getElementById("fmp4-model2").style.display="none"
    }
    clickScroll(){
        this.props.clickBack(4)
    }
    confirmModel(){
        var items=document.querySelectorAll(".fmp4-select-content")
        if(this.state.moiskin.dname != ""){
            items[1].classList.add("fmp-select-content-act")
            items[1].querySelector(".fmp-sc-icon").classList.add("fmp-sc-icon-active")
        }else{
            items[1].classList.remove("fmp-select-content-act")
            items[1].querySelector(".fmp-sc-icon").classList.remove("fmp-sc-icon-active")
        }
        document.getElementById("fmp4-model").style.display="none"
    }
    confirmModel2(){
        let preservative={
            dname:"防腐剂",
            name:"fangfuji-a"
        }
        this.setState({
            preservative:preservative
                
        })
        console.log(preservative)
        this.props.callback3(preservative)
        var items=document.querySelectorAll(".fmp4-select-content");
        items[2].classList.add("fmp-select-content-act")
        items[2].querySelector(".fmp-sc-icon").classList.add("fmp-sc-icon-active")
        document.getElementById("fmp4-model2").style.display="none"
    }
    returnOrder(){
        this.props.clickRetOrder(6)
    }
    render() {
        return (
            <div className="fmp-container" style={{top: "300%"}} id="fmpage4">
                <div className="fmt-container boxshaw" style={{width:"2.3rem"}}>
                    <div className="fmt-container-circle">
                        <div className="fmt-container-circle-line"></div>
                    </div>
                    <span style={{fontSize:"0.5rem"}}>{this.state.title}</span>
                </div>
                <Facialmaskylcs words={this.state.words}/>
                <div className="fmp-sign">
                    <div className="fmp-sign-img">
                        <img src={Gximg}/>
                    </div>
                    <div className="fmp-sign-wz">
                        <p>&nbsp;小懒系列漫画之</p>
                        <p>《萌拼面膜研究》</p>
                    </div>
                     {this.props.isreturn?
                    <div className="fmp-sign-return" onClick={this.returnOrder.bind(this)}>
                        返回订单
                    </div>:""}
                </div>
                <p className="bn-tishi">《《请上下滑动切换选择成分》》</p>
                <div className="fmp-select boxshaw">
                    <div className="fmp-select-title">
                        <p>根据自己需要挑选添加<span className="fmp-select-title-span">功效</span>吧<i className="iconfont">&#xe616;</i></p>
                    </div>
                    <ul className="fmp-select-row"> 
                        <li className="fmp-select-content fmp4-select-content"> 
                            <i className="iconfont fmp-sc-icon">&#xe73d;</i>                
                            <div className="fmp-sc-detail">
                                <p>美白<br/>(传明酸)</p>
                            </div>
                        </li>
                        <li className="fmp-select-content fmp4-select-content">
                            <i className="iconfont fmp-sc-icon">&#xe73d;</i>
                            <div className="fmp-sc-detail">
                                {this.state.moiskin.dname==""?<p>滋润<br/>...</p>:<p>{this.state.moiskin.dname}</p>}
                            </div>
                        </li>
                        <li className="fmp-select-content fmp4-select-content">
                            <i className="iconfont fmp-sc-icon">&#xe73d;</i>
                            <div className="fmp-sc-detail">
                                <p>防腐剂<br/>...</p>
                            </div>
                        </li>
                    </ul>
                    <div className="fmp-select-tip">
                        <div className="fmp4-st-exp fmp-select-tip-active"><i className="iconfont fmp-select-tip-icon">&#xe629;</i><span className="fmp-select-tip-iconwz">温馨提示</span><p className="fmp-select-tip-wz">如果能在2个月内使用完购买产品，建议不加防腐剂！</p></div>
                    </div>
                    <div className="fmp-select-bottom">
                        <i className="iconfont" onClick={this.clickScroll.bind(this)}>&#xe66f;</i>
                    </div>   
                </div>
                <div className="fmp-model" id="fmp4-model" >
                    <div className="fmp-model-cover"></div>     
                    <div className="fmp-select fmp-model-select" style={{marginTop:"1.5rem"}}>
                        <div className="fmp-select-cricle">
                            <div className="fmp-select-cricle-circleLeft">
                                <div className="fmp-select-cricle-lineLeft"></div>  
                            </div>
                            <div className="fmp-select-cricle-circleRight">
                                <div className="fmp-select-cricle-lineRight"></div>
                            </div>
                        </div>
                        <div className="fmp-select-title">
                            <p>点击下面挑挑<span className="fmp-select-title-span">滋润</span>成分元素吧<i className="iconfont">&#xe616;</i></p>
                        </div>
                        <div className="fmp-select-explain">
                        </div>
                        <ul className="fmp-select-row"> 
                            <li className="fmp-select-content fmp4-mselect-content">
                                <i className="iconfont fmp-sc-icon">&#xe73d;</i>                 
                                <div className="fmp-sc-detail">
                                    <p>霍霍芭油</p>
                                </div>
                            </li>
                            <li className="fmp-select-content fmp4-mselect-content">
                                <i className="iconfont fmp-sc-icon">&#xe73d;</i>
                                <div className="fmp-sc-detail">
                                    <p>玫瑰果油</p>
                                </div>
                            </li>
                        </ul>   
                        <div className="fmp-select-tip" style={{marginBottom:"1rem"}}>
                            <div className="fmp4-mst-explain" style={{display:"block"}}><i className="iconfont fmp-select-tip-icon">&#xe629;</i><span className="fmp-select-tip-iconwz">霍霍芭油</span><p className="fmp-select-tip-wz">柔软滋养肌肤，偏干性皮肤可以选择添加</p></div>
                            <div className="fmp4-mst-explain" style={{display:"block"}}><i className="iconfont fmp-select-tip-icon">&#xe629;</i><span className="fmp-select-tip-iconwz">玫瑰果油</span><p className="fmp-select-tip-wz">修护抗衰，中性和干性皮肤选择添加</p></div>
                        </div>
                        <div className="fmp-select-bottom">
                            <span onClick={this.confirmModel.bind(this)}>确定</span>
                        </div>   
                    </div>
                </div>
                <div className="fmp-model" id="fmp4-model2">
                    <div className="fmp-model-cover"></div>
                    <div className="fmp-model-title">
                        <img src={Gxmclose} onClick={this.closeModel2}/>
                    </div>
                    <div className="fmp-model-tie">               
                        <i className="iconfont fmp-select-tip-icon">&#xe629;</i>
                        <span className="fmp-select-tip-iconwz">确定要添加防腐剂吗？</span>
                        <p className="fmp-select-tip-wz">防腐剂能保鲜产品比较长的时间，但也是化妆品中主要的过敏原，如能在2个月内使用完购买产品，建议不加防腐剂！</p>
                        <div className="fmp-select-bottom">
                            <span onClick={this.confirmModel2.bind(this)}>确定</span>
                        </div>
                    </div>
                </div> 
            </div>
        )
        
    }
}


export default Facialmaskpage4;